<template>
  <view class="secondhand-page">
    <!-- 搜索弹窗 -->
      <view class="search-popup">
        <uni-search-bar v-model="searchKeyword" placeholder="搜索商品名称" @confirm="handleSearch" 
			@blur="handleSearch" bgColor="#fff" radius="100">
        </uni-search-bar>
      </view>

    <!-- 分类导航 -->
    <scroll-view class="category-nav" scroll-x>
      <view v-for="(category, i) in categories" 
            :key="i" 
            class="category-item"
            :class="{active: activeCategory === category.id}"
            @click="changeCategory(category.id)">
        <text>{{category.name}}</text>
      </view>
    </scroll-view>

    <!-- 商品列表 -->
    <!-- <scroll-view class="product-list" scroll-y :style="{height: scrollHeight + 'px'}"> -->
     <view class="product-list" style="padding: 25rpx;">
		 <view class="product-grid">
		   <view class="product-card" v-for="(product, i) in filteredProducts" 
		         :key="i" @click="viewProductDetail(product.id)">
		     <view class="product-image">
		       <image :src="JSON.parse(product.images)[0].url" mode="aspectFill"></image>
		       <view class="product-tag" v-if="product.tag">{{product.tag}}</view>
		     </view>
		     <view class="product-info">
		       <text class="product-title">{{product.title}}</text>
		       <text class="product-price">¥{{product.price}}</text>
		       <view class="product-meta">
		         <view class="location">
		           <text>{{product.description}}</text>
		         </view>
		       </view>
		     </view>
		   </view>
		 </view>
	 </view>
      
      <view class="load-more" v-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      <view class="no-more" v-if="!hasMore && filteredProducts.length > 0">
        <text>没有更多了</text>
      </view>
      <view class="empty" v-if="filteredProducts.length === 0">
        <image src="/static/image/que.png" mode="aspectFit"></image>
        <text>暂无商品</text>
      </view>
    <!-- </scroll-view> -->

    <!-- 发布按钮 -->
    <view class="publish-btn" @click="showPublishSheet">
      <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
    </view>
	
    <!-- 发布动作面板 -->
	
    <u-popup  :show="publishSheet"  type="bottom" @close="close" @open="open" backgroundColor="#f5f5f5">
      <view class="publish-sheet">
        <view class="sheet-header">
          <text class="title">发布商品</text>
          <uni-icons type="closeempty" size="20" @click="closePublishSheet"></uni-icons>
        </view>
        <view class="sheet-content">
          <view class="publish-option" @click="navigateToPublish('/pages/service/telecom/digital/digital')">
            <view class="option-icon">
              <image src="/static/icons/shu.png" mode="aspectFit"></image>
            </view>
            <text class="option-text">数码电子</text>
          </view>
          <view class="publish-option" @click="navigateToPublish('book')">
            <view class="option-icon">
              <image src="/static/icons/jiao.png" mode="aspectFit"></image>
            </view>
            <text class="option-text">教材书籍</text>
          </view>
          <view class="publish-option" @click="navigateToPublish('daily')">
            <view class="option-icon">
              <image src="/static/icons/shenghuo.png" mode="aspectFit"></image>
            </view>
            <text class="option-text">生活用品</text>
          </view>
          <view class="publish-option" @click="navigateToPublish('other')">
            <view class="option-icon">
              <image src="/static/icons/qita.png" mode="aspectFit"></image>
            </view>
            <text class="option-text">其他商品</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollHeight: 0,
      showSearch: false,
	  publishSheet:false,
      searchKeyword: '',
      activeCategory: 'all',
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 10,
      categories: [],
      products: [],
      filteredProducts: [],
	  page:{
		  page:1,
		  limit:20
	  },
	  total:0
    }
  },
  created() {
    this.calculateScrollHeight()

  },
  onLoad() {
  	this.getQuery()
	this.getSecondGoods()
  },
  methods: {
	async getSecondGoods(){
		const params = {
			category_id:this.activeCategory,
			title:this.searchKeyword,
			...this.page
		}
		this.filteredProducts = []
		const res = await this.$api.get('/SecondGoods/list',params,true)
		if(res.data.code === 200) {
			this.total = res.data.data.total
			if (res.data.data.list && res.data.data.list.length > 0) {
			  this.filteredProducts = this.filteredProducts.concat(res.data.data.list);
		
			  if (res.data.data.list.length < this.page.limit) {
				this.hasMore = false; // 数据不足一页，说明到底了
			  } else {
				this.page.page++; // 还有下一页
			  }
			} else {
			  this.hasMore = false; // 没返回数据，说明到底了
			}
		
			this.loading = false;
		}
	},
	async  getQuery(){
		const res = await this.$api.get('/GoodsCategory/list','',true)
		  if(res.data.code === 200) {
			  this.categories = res.data.data.list
			  this.categories.unshift({id:'all',name:'全部'})
		  }
	},
    calculateScrollHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.scrollHeight = systemInfo.windowHeight - 100 // 减去导航和分类栏高度
    },
    changeCategory(category) {
      this.activeCategory = category
      this.page.page = 1
      this.hasMore = true
    
	  this.getSecondGoods()
    },
    handleSearch() {
      this.showSearch = false
      // 实际项目中这里应该调用搜索API
      console.log('搜索关键词:', this.searchKeyword)
	  this.getSecondGoods()
    },
    getPageData() {
      // 模拟分页加载
      const start = (this.page.page - 1) * this.page.limit
      const end = start + this.page.limit
      
      let data = this.products
      if (this.activeCategory !== 'all') {
        data = data.filter(item => item.category === this.activeCategory)
      }
      
      return data.slice(0, end)
    },
    loadMore() {
      if (this.loading || !this.hasMore) return
      
      this.loading = true
	  this.getSecondGoods()
      
    },
    viewProductDetail(id) {
      uni.navigateTo({
        url: `/pagesA/goodsDetail?id=${id}`
      })
    },
    showPublishSheet() {
		this.navigateToPublish('/pages/service/telecom/digital/digital')
      // this.publishSheet = true
    },
    closePublishSheet() {
      this.publishSheet = false
    },

	close() {
	  this.publishSheet = false
	},
    navigateToPublish(url) {
      this.close()
      uni.navigateTo({
        url: url
      })
    }
  },
  onReachBottom() {
    this.loadMore()
  }
}
</script>

<style lang="scss">
.secondhand-page {
  background: #f5f5f5;
  min-height: 100vh;
  
  .nav-bar {
    padding: 15px;
    background: #fff;
    
    .title {
      font-size: 22px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 15px;
    }
    
    .search-box {
      background: #f5f5f5;
      border-radius: 20px;
      padding: 10px 15px;
      display: flex;
      align-items: center;
      
      text {
        font-size: 14px;
        color: #999;
        margin-left: 8px;
      }
    }
  }
  
  .search-popup {
    padding: 15px;
    background: #fff;
  }
  
  .category-nav {
    white-space: nowrap;
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    
    .category-item {
      display: inline-block;
      padding: 5px 15px;
      margin-right: 10px;
      border-radius: 15px;
      
      text {
        font-size: 14px;
        color: #666;
      }
      
      &.active {
        background: #409EFF;
        
        text {
          color: #fff;
        }
      }
    }
  }
  
  .product-list {
    
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    
    .product-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      
      .product-image {
        position: relative;
        width: 100%;
        height: 160px;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        .product-tag {
          position: absolute;
          top: 8px;
          right: 8px;
          background: rgba(255,59,48,0.9);
          color: #fff;
          font-size: 10px;
          padding: 2px 6px;
          border-radius: 8px;
        }
      }
      
      .product-info {
        padding: 10px;
        
        .product-title {
          font-size: 14px;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 8px;
          line-height: 1.4;
        }
        
        .product-price {
          font-size: 16px;
          font-weight: bold;
          color: #FF5252;
          display: block;
          margin-bottom: 8px;
        }
        
        .product-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .location {
            display: flex;
            align-items: center;
            white-space: nowrap;           /* 不换行 */
              overflow: hidden;              /* 超出隐藏 */
              text-overflow: ellipsis;
            text {
              font-size: 10px;
              color: #999;
              margin-left: 3px;
            }
          }
          
          .time {
            font-size: 10px;
            color: #999;
          }
        }
      }
    }
    
    
    
    
  }
  .load-more, .no-more {
    padding: 15px 0;
    text-align: center;
    
    text {
      font-size: 12px;
      color: #999;
    }
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    text-align: center;
	color: #666;
    image {
      width: 120px;
      height: 120px;
      margin-bottom: 15px;
    }
    
    text {
      font-size: 14px;
      color: #999;
    }
  }
  .publish-btn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: #409EFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(64,158,255,0.3);
    z-index: 10;
  }
  
  .publish-sheet {
    padding: 15px;
    border-radius: 15px 15px 0 0;
    
    .sheet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
    
    .sheet-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      
      .publish-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .option-icon {
          width: 60px;
          height: 60px;
          background: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;
          box-shadow: 0 4px 10px rgba(0,0,0,0.05);
          
          image {
            width: 30px;
            height: 30px;
          }
        }
        
        .option-text {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}
</style>